<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微说说</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="icon" href="jpg/favicon.ico" type="image/x-icon">

</head>
<style>
  .container {
    opacity: 0.7;

  }

  body {
    background-image: url(/jpg/9.jpg);
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    background-size: 100% auto;
    padding-top: 2%;
  }

  #msg {
    padding-top: 15px;
  }

  .div_foot {
        text-align: center;
        height: 100px;
        width: 100%;
        position: fixed;
        bottom: 3px;
    }
</style>


<body>
  <div class="container">
    <div class="row">
      <div class="col-sm">

      </div>
      <div class="col-sm">
        <div class="card">
          <div class="card-header" style="width:66rem;">
            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">
              发表说说
            </button>
            <span style="margin-left: 220px;">
              当前用户: {{admin}}
            </span>
            <a style="margin-left: 140px;" href="/logout">
              <button type="button" class="btn btn-secondary">注销登录</button>
            </a>
            <a style="margin-left: 210px;" href="/setting">
              <button type="button" class="btn btn-secondary">账号设置</button>
            </a>

          </div>
        </div>
      </div>
      <div class="col-sm">

      </div>
    </div>

    <div class="row" id="msg">
      <div class="col-sm">
      </div>
      <div class="col-sm" id="saysayMsg">
        {% for msg in msgs %}
        <div class="card border-primary shadow" style="width:66rem;">
          <div class="card-header">
            <div class="row">
              <div class="col-sm-10">{{msg.content}}</div>
              <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm" data-toggle="modal"
                  data-target="#comment" onclick="commit('{{msg.id}}')">吐槽一下</button>
              </div>
            </div>

          </div>

          <div class="card-body">
            <ul class="list-group list-group-flush" id="{{msg.id}}">
              {% for cmot in msg.comments %}
              <li class="list-group-item">
                <blockquote class="blockquote mb-0">
                  <p>{{cmot.content}}</p>
                  <footer class="blockquote-footer">
                    <cite title="Source Title">{{cmot.comUserName}}</cite>&nbsp;&nbsp;对
                    <cite title="Source Title">{{msg.msgUserName}}</cite>&nbsp;&nbsp;说
                  </footer>
                </blockquote>
              </li>
              {% endfor %}
            </ul>

          </div>
        </div>

        {% endfor %}

      </div>
      <div class="col-sm">
      </div>
    </div>
   

  </div>

  <div class="div_foot">
    <a style="color:pink">
        2021-2022©Lucas科技有限公司
    </a>

    <a href="https://beian.miit.gov.cn/" style="text-decoration:none; color: pink; margin-left: 30px;">
        赣ICP备2020013193号-1
    </a>

    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35080202351206"
        style="display:inline-block;text-decoration:none;height:20px;line-height:20px; margin-left: 80px;"><img
            src="/jpg/备案图标.png" style="float:left;" />

    <a href="https://beian.miit.gov.cn/" style="text-decoration:none; color:pink ">
            闽公网安备 35080202351206号
    </a>

</div>









  <!-- 发表说说 -->
  <div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">发表说说</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="email" class="form-control" id="msgSay" aria-describedby="emailHelp">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="say()">发表</button>
        </div>
      </div>
    </div>
  </div>


  <!-- 吐槽 -->
  <div class="modal" id="comment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">吐槽一下</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="email" class="form-control" id="commentText" aria-describedby="emailHelp">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="comment()">发表</button>
        </div>
      </div>
    </div>
  </div>




</body>

<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<script>
  let currentMsgId = '';


  function say() {
    let data = {
      msgSay: $('#msgSay').val()
    }
    $.ajax({
      url: "/say",
      type: "POST",
      dataType: "json",
      data: data,
      success: function (msg) {
        console.log(msg);
        if (msg.code === 200) {
          console.log("发表成功")
          let data = JSON.parse(msg.data);
          console.log(data);
          let html = `
         <div class="card border-primary shadow" style="width:66rem;">
          <div class="card-header">
            <div class="row">
              <div class="col-sm-10">${data.content}</div>
              
              <div class="col-sm-2"><button type=“button” class="btn btn-secondary btn-sm" data-toggle="modal"
                  data-target="#comment" onclick="commit(${data.id})">吐槽一下</button>
              </div>
            </div>

          </div>
          <div class="card-body">
            <ul class="list-group list-group-flush" id=${data.id}>              
            </ul>
          </div>
        </div>

         `
          $("#saysayMsg").prepend(html);
        }
      },
      error: function (msg) {
        console.log('网络或者服务器有问题');
      }
    })
  }


  function commit(id) {
    currentMsgId = id;
  }

  function comment() {
    let data = {
      content: $("#commentText").val(),
      touserId: currentMsgId
    }
    $.ajax({
      url: "/comment",
      type: "POST",
      dataType: "json",
      data: data,
      success: function (msg) {
        console.log(msg);
        if (msg.code === 200) {
          console.log("吐槽成功");
          let data = msg.data;
          let html = `
          <li class="list-group-item">
                                <blockquote class="blockquote mb-0">
                                    <p>${data.content}</p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">${data.fromUserName}</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">${data.toUserName}</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                        `;
          $('#' + currentMsgId).append(html);

        }

      },
      error: function (msg) {
        console.log('网络或者服务器有问题');
      }
    })
  }


</script>


</html>